<div>
	{% if limits.upgrade_url %}
	<div class="upgrade-message padding" style="border-bottom: 1px solid #d0d8dc;">
		{% if limits.expiry %}
			<h4>{{ __("You have {0} days left in your subscription", [days_to_expiry]) }}</h4>
		{% else %}
			<h4>{{ __("You have subscribed for one user free plan") }}</h4>
		{% endif %}

		<p>Upgrade to a premium plan with more users, storage and priority support.</p>
		<button class="btn btn-primary btn-sm primary-action">Upgrade</button>
	</div>
	{% endif %}

	{% if limits.users %}
	    {% var users_percent = ((enabled_users / limits.users) * 100); %}
	<div class="usage-info-section" style="margin: 30px;">
		<h4>{{ __("Users") }}</h4>

		<div class="progress" style="margin-bottom: 0;">
			<div class="progress-bar progress-bar-{%= (users_percent < 75 ? "success" : "warning") %}" style="width: {{ users_percent }}%">
			</div>
		</div>

		<p>{%= enabled_users %} out of {%= limits.users %} enabled</p>
	</div>
	{% endif %}

	{% if limits.emails %}
	<div class="usage-info-section" style="margin: 30px;">
	    <h4>{{ __("Emails") }}</h4>

	    {% var email_percent = (( emails_sent / limits.emails ) * 100); %}
	    {% var emails_remaining = (limits.emails - emails_sent) %}

	    <div class="progress" style="margin-bottom: 0;">
	        <div class="progress-bar progress-bar-{%= (email_percent < 75 ? "success" : "warning") %}" style="width: {{ email_percent }}%">
	        </div>
	    </div>

		<p>{%= emails_sent %} out of {%= limits.emails %} sent this month</p>
	</div>
	{% endif %}

	{% if limits.space %}
	<div class="usage-info-section" style="margin: 30px;">
	    <h4>{{ __("Space") }}</h4>

	    <div class="progress" style="margin-bottom: 0;">
	        <div class="progress-bar" style="width: {%= database_percent %}%; background-color: #5e64ff"></div>
	        <div class="progress-bar" style="width: {%= files_percent %}%; background-color: #743ee2"></div>
	        <div class="progress-bar" style="width: {%= backup_percent %}%; background-color: #7CD6FD"></div>
	    </div>

		<span class="indicator blue" style="margin-right: 20px;">
			{{ __("Database Size:") }} {%= limits.space_usage.database_size %} MB
		</span>
		<span class="indicator purple" style="margin-right: 20px;">
			{{ __("Files Size:") }} {%= limits.space_usage.files_size %} MB
		</span>
		<span class="indicator lightblue" style="margin-right: 20px;">
			{{ __("Backup Size:") }} {%= limits.space_usage.backup_size %} MB
		</span>

		<p>{{ usage_message }}</p>
	</div>
	{% endif %}
</div>
